﻿@media all
{
    /*----------------------------------------------------------
    The base color for this template is #5c87b2. If you'd like
    to use a different color start by replacing all instances of
    #5c87b2 with your new color.
    ----------------------------------------------------------*/
    body{background-color:#FFF;font-size:.85em;font-family:"Trebuchet MS", Verdana, Helvetica, Sans-Serif;color:#696969;margin:0;padding:0}
    a:link{color:#034af3;text-decoration:underline}
    a:visited{color:#505abc}
    a:hover{color:#1d60ff;text-decoration:none}
    a:active{color:#12eb87}
    p,ul{margin-bottom:20px;line-height:1.6em}
    header,footer,nav,section{display:block}
    /* HEADINGS   
    ----------------------------------------------------------*/
    h1,h2,h3,h4,h5,h6{font-size:1.5em;color:#000}
    h1{font-size:2em;padding-bottom:0;margin-bottom:0}
    h2{padding:0 0 10px}
    h3{font-size:1.2em}
    h4{font-size:1.1em}
    h5,h6{font-size:1em}

    /* PRIMARY LAYOUT ELEMENTS   
    ----------------------------------------------------------*/

    /* you can specify a greater or lesser percentage for the 
    page width. Or, you can specify an exact pixel width. */
    
    .page{width:80%;margin-left:auto;margin-right:auto}
    header,#header{position:relative;margin-bottom:0;color:#000;padding:0}
    header h1,#header h1{font-weight:700;color:#fff;border:none;line-height:2em;font-size:32px!important;text-shadow:1px 1px 2px #111;margin:0;padding:5px 0}
    .main{background-color:#fff;border-radius:4px 0 0 0;-webkit-border-radius:4px 0 0 0;-moz-border-radius:4px 0 0;padding:30px 30px 15px}
    footer,#footer{background-color:#fff;color:#999;text-align:center;line-height:normal;font-size:.9em;border-radius:0 0 4px 4px;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;margin:0 0 30px;padding:10px 0}

    /* Header   
    ----------------------------------------------------------*/
    
    /*** Header top navigation ***/
    .header .header-top-nav { margin: 0px 0 0 0; text-align: center; 
        background: transparent;
        background-image: #EBEBED;
        background-image: -moz-linear-gradient(bottom, #EBEBED 0%, #EAEAEE 50%, #F3F3F7 100%);
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EBEBED), color-stop(0.5, #EAEAEE), color-stop(1, #F3F3F7));
        background-image: -webkit-linear-gradient(bottom, #EBEBED 0%, #EAEAEE 50%, #F3F3F7 100%);
        background-image: -o-linear-gradient(bottom, #EBEBED 0%, #EAEAEE 50%, #F3F3F7 100%);
        background-image: linear-gradient(bottom, #EBEBED 0%, #EAEAEE 50%, #F3F3F7 100%);  
        height: 40px;                               
    }
    .header .header-top-nav ul { margin: 0; display: inline-block; /*border: 1px solid #000;*/ }
    .header .header-top-nav ul li { display: inline-block; float: left; padding: 0 10px; border-left: 1px solid grey; line-height: 40px; }
    .header .header-top-nav ul li.countdown { border-left: none; border-right: 1px solid #BBB;} 
    .header .header-top-nav ul li.invitations {border-left: 1px solid white; border-right: 1px solid #BBB; position: relative; }
    .header .header-top-nav ul li.invitations:hover { cursor: pointer; }
    .header .header-top-nav ul li.invitations .invitations-list { display: none; background: rgba(255,255,255,1); position: absolute; top: 40px; left: 0; width: 210px; padding: 0; }
    .header .header-top-nav ul li.invitations .invitations-list li { display: block; border: none; }
    .header .header-top-nav ul li.notifications { border-left: 1px solid white; border-right: 1px solid #BBB; position: relative; }
    .header .header-top-nav ul li.notifications:hover { cursor: pointer; }
    .header .header-top-nav ul li.notifications .notifications-list { display: none; background: rgba(255,255,255,1); position: absolute; top: 40px; left: 0; width: 210px; padding: 0; }
    .header .header-top-nav ul li.notifications .notifications-list li { display: block; border: none; }
    .header .header-top-nav ul li.help {border-left: 1px solid white; }
    .header .header-top-nav ul li a { color: #2F2F2F; text-decoration: none;}
    .header .header-top-nav ul li a:hover { color: #2F2F2F; text-decoration: underline; } 

    /*** Header main navigation ***/
    .header .header-main-nav { margin: 10px 0 0 0; text-align: center; 
        background: transparent;
        background-image: #EBEBED;
        background-image: -moz-linear-gradient(bottom, #EBEBED 0%, #EAEAEE 50%, #F3F3F7 100%);
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EBEBED), color-stop(0.5, #EAEAEE), color-stop(1, #F3F3F7));
        background-image: -webkit-linear-gradient(bottom, #EBEBED 0%, #EAEAEE 50%, #F3F3F7 100%);
        background-image: -o-linear-gradient(bottom, #EBEBED 0%, #EAEAEE 50%, #F3F3F7 100%);
        background-image: linear-gradient(bottom, #EBEBED 0%, #EAEAEE 50%, #F3F3F7 100%);       
        height: 60px;                        
    }
    .header .header-main-nav ul { margin: 0; display: inline-block; line-height: 60px; /*border: 1px solid #000;*/ }
    .header .header-main-nav ul li { display: inline-block; float: left; height: 60px; font-size: 1.167em; border-left: 1px solid grey; padding: 0 20px; border-left: 1px solid white; border-right: 1px solid #BBB; }
    .header .header-main-nav ul li.user-info { display: inline-block; border-left: none; }
    .header .header-main-nav ul li.user-info p { margin: 0; }
    .header .header-main-nav ul li.user-info .name { font-size: 0.667em; }
    .header .header-main-nav ul li.user-info .balance {font-size: 0.833em; }    
    .header .header-main-nav ul li.statistics { border-right: none; }
    .header .header-main-nav ul li.clear { display: none; }
    .header .header-main-nav ul li a { color: #2F2F2F; text-decoration: none;}
    .header .header-main-nav ul li a:hover { color: #2F2F2F; /*text-decoration: underline;*/ }
    .header .header-main-nav ul li a.selected { color: #FF0000; }
    
    /* Mobile submenu */   
    .header .header-main-nav ul .mobile-submenu-dropdown { padding: 0; display: inline; border: none; }
    .header .header-main-nav ul .mobile-submenu { padding: 0; display: inline;}
    
    
    /* Usage : .rounded-corners; or .rounded-corners(10px); */
    .rounded-corners {
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -khtml-border-radius: 5px;
      -moz-border-radius: 5px;
      -o-border-radius: 5px;
    }    
    
    /*** Header buttons ***/
    .header .header-buttoms { margin: 20px 0 0 0; display: inline-block; width: 100%; }
    .header .header-buttoms div { width: 45% }
    .header .header-buttoms a { text-decoration: none; background: #7CFC00; color: #FFFFFF;  
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius: 5px;                                
        line-height: 40px;
        padding: 10px 20px;
        border: 1px solid #00FF00;     
        text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
        box-shadow: inset -1px -1px rgba(0, 0, 0, 0.19);
        -webkit-box-shadow: inset -1px -1px rgba(0, 0, 0, 0.19);
        -moz-box-shadow: inset -1px -1px rgba(0, 0, 0, 0.19);                 
    }
    .header .header-buttoms a:hover { text-decoration: none; }
    .header .header-buttoms .header-buttoms-makebid { float: left; text-align: right; }
    .header .header-buttoms .header-buttoms-makebid a { }
    .header .header-buttoms .header-buttoms-creategroup { float: right; text-align: left;}
    .header .header-buttoms .header-buttoms-creategroup a { }

    /* Content
    ----------------------------------------------------------*/    
    .tabs-bids .bids-info { display: table; margin: 0; padding: 0; width: 100%; font-size: 0.8em; }
    .tabs-bids .bids-info-item { display: table-cell; }
    .tabs-bids .bids-list { display: inline-block; margin: 0; padding: 0; width: 100%; font-size: 0.8em; }
    .tabs-bids .bids-list-item { display: table; width: 100%; }
    .tabs-bids .bids-list-item span { display: table-cell; width: 10%; }
    .tabs-bids .bids-title-item { display: table; width: 100%; }
    .tabs-bids .bids-title-item span { display: table-cell; width: 10%; font-weight: bold; }    
    
    /* Make bid form
    ----------------------------------------------------------*/  
    .form-makebid{ width:50%; margin: 0 auto; }
    
    /* Administrator
    ----------------------------------------------------------*/   
    .admin .header .header-main-nav { margin-top: 0; }
    .admin .header .header-main-nav ul li.first { border-left: none; }
    .admin .header .header-main-nav ul li.last { border-right: none; }
   
    /* TAB MENU   
    ----------------------------------------------------------*/   
   .manage-link { position: absolute; top: 0; right: 10px; z-index: 100;} 
    
    /* TAB MENU   
    ----------------------------------------------------------*/
    ul#menu{border-bottom:1px #5C87B2 solid;position:relative;text-align:right;margin:0;padding:0 0 2px}
    ul#menu li{display:inline;list-style:none}
    ul#menu li#greeting{font-weight:700;text-decoration:none;line-height:2.8em;color:#fff;padding:10px 20px}
    ul#menu li a{font-weight:700;text-decoration:none;line-height:2.8em;background-color:#e8eef4;color:#034af3;border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;padding:10px 20px}
    ul#menu li a:hover{background-color:#fff;text-decoration:none}
    ul#menu li a:active{background-color:#a6e2a6;text-decoration:none}
    ul#menu li.selected a{background-color:#fff;color:#000}

    /* FORM LAYOUT ELEMENTS   
    ----------------------------------------------------------*/

    fieldset{border:1px solid #ddd;margin:0 0 1.5em;padding:0 1.4em 1.4em}
    legend{font-size:1.2em;font-weight:700}
    textarea{min-height:75px}
    input[type=text],input[type=password]{border:1px solid #ccc;font-size:1.2em;color:#444;width:200px;padding:2px}
    select{border:1px solid #ccc;font-size:1.2em;color:#444;padding:2px}
    input[type=submit]{font-size:1.2em;padding:5px}

    /* TABLE
    ----------------------------------------------------------*/

    table{border:solid 1px #e8eef4;border-collapse:collapse}
    table td{border:solid 1px #e8eef4;padding:5px}
    table th{text-align:left;background-color:#e8eef4;border:solid 1px #e8eef4;padding:6px 5px}

    /* MISC  
    ----------------------------------------------------------*/
    .hide { display: none; }
    .clear{clear:both}
    .error{color:Red}
    nav,#menucontainer{margin-top:40px}
    div#title{display:block;float:left;text-align:left}
    #logindisplay{font-size:1.1em;display:block;text-align:right;color:#FFF;margin:10px}
    #logindisplay a:hover{color:#FFF;text-decoration:none}
    #logindisplay a:link,#logindisplay a:visited{color:#FFF;text-decoration:underline}

    /* Styles for validation helpers
    -----------------------------------------------------------*/
    .field-validation-error{color:red}
    .input-validation-error{border:1px solid red;background-color:#fee}
    .validation-summary-errors{font-weight:700;color:red}
    .field-validation-valid,.validation-summary-valid{display:none}

    /* Styles for editor and display helpers
    ----------------------------------------------------------*/
    .display-label,.editor-label{margin:1em 0 0}
    .display-field,.editor-field{margin:.5em 0 0}
    .text-box{width:30em}
    .text-box.multi-line{height:6.5em}
    .tri-state{width:6em}
}

@media screen and (min-width: 1024px)
{
    .header .header-main-nav ul .mobile-submenu { display: inline !important; }
}

@media screen and (min-width: 641px) and (max-width: 1023px)
{
    /* Header   
    ----------------------------------------------------------*/
    .header .header-top-nav ul li { border-left: 1px solid red; }    
    .header .header-main-nav ul li { border-left: none; line-height: 30px; } 
    
    .header .header-main-nav { height: 100%; }
    .header .header-main-nav ul { width: 40%; }
    .header .header-main-nav ul li { margin: 0; border: none; line-height: 40px; height: 100%; }
    .header .header-main-nav ul li.left { float: left; }
    .header .header-main-nav ul li.right { float: right; }
    .header .header-main-nav ul li.clear { width: 100%; display: inline-block; clear:both; margin-top: 5px; height: 0;}
    
    
    .header .header-main-nav ul .mobile-submenu { display: inline !important; }
    .header .header-main-nav ul .mobile-submenu-dropdown { margin-top: -40px; }
    
    /* Make bid form
    ----------------------------------------------------------*/  
    .form-makebid{ width:80%; margin: 0 auto; }
}

@media screen and (min-width: 320px) and (max-width: 640px)
{
    /* Header   
    ----------------------------------------------------------*/
    .header .header-top-nav { padding-left: 0;}
    .header .header-top-nav ul { padding-left: 0; }
    .header .header-top-nav ul li { border-left: 1px solid green; padding: 0 7px; }
    .header .header-top-nav ul li .header-top-nav-title { display: none; }
    
    .header .header-main-nav ul { padding-left: 0; }
    .header .header-main-nav ul li { border-left: 1px solid green; } 
    .header .header-main-nav ul li{ border-right: none; }
    .header .header-main-nav ul li.clear { display: none; visibility: hidden; }
    /*.header .header-main-nav ul li { border: none; }
    .header .header-main-nav ul li a { display: none; }
    .header .header-main-nav ul li a.selected { display: inline-block; }
    .header .header-main-nav ul li.user-info { display: inline-block; }*/
    
    .header .header-main-nav ul .mobile-submenu-dropdown .dropdown-selection {
        display: inline-block; 
        padding: 0 20px;
        position: relative;
        /*font-size: 11px;*/
        /*line-height: 16px;*/
        /*color: #555;*/
        /*position: absolute;*/
        /*z-index: 110;*/
        /*display: block;*/
        /*padding: 11px 0 0 20px;*/
        /*height: 28px;*/
        /*width: 121px;*/
        /*margin: -11px 0 0 -10px;*/
        /*text-decoration: none;
        background: url(icons/arrow.png) 116px 17px no-repeat;
        cursor:pointer;*/
    }
    
    .header .header-main-nav ul .mobile-submenu-dropdown .dropdown-selection .arrow-up-green  {
        background: transparent url(images/icons/arrow-up-green.png) no-repeat center center; 
        width: 25px;
        height: 25px;
        position: absolute;
        top: 20px;
        right: 0;        
    }
    .header .header-main-nav ul .mobile-submenu-dropdown .dropdown-selection .arrow-down-red  {
        background: transparent url(images/icons/arrow-down-red.png) no-repeat center center; 
        width: 25px;
        height: 25px;
        position: absolute;
        top: 20px;
        right: 0;        
    }    
    .header .header-main-nav ul .mobile-submenu-dropdown .dropdown-selection .title  {
        font-size: 1.167em; margin-right: 10px; 
    }
    .header .header-main-nav ul li ul.mobile-submenu li a.selected { display: none; }
    
    .header .header-main-nav ul .mobile-submenu-dropdown {
        /*color: #555;*/
        /*margin: 3px -22px 0 0;*/
        /*width: 143px;*/
        /*position: relative;*/
        /*height: 17px;*/
        /*text-align:left;    */
        display: inline-block;
        /*padding: 0 60px;  */
        border: none;  
        cursor: pointer;               
    }

    .header .header-main-nav ul .mobile-submenu {
        background: #fff;
        position: absolute;
        top: 110px;
        left: 0;
        z-index: 100;
        width: 100%;
        display: none;
        /*margin-left: 10px;*/
        /*padding: 40px 0 5px;*/
        list-style-type: none;
        /*border-radius: 6px;*/
        /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);   */
        background: transparent;
        background-image: #EBEBED;
        background-image: -moz-linear-gradient(bottom, #EBEBED 0%, #EAEAEE 50%, #F3F3F7 100%);
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EBEBED), color-stop(0.5, #EAEAEE), color-stop(1, #F3F3F7));
        background-image: -webkit-linear-gradient(bottom, #EBEBED 0%, #EAEAEE 50%, #F3F3F7 100%);
        background-image: -o-linear-gradient(bottom, #EBEBED 0%, #EAEAEE 50%, #F3F3F7 100%);
        background-image: linear-gradient(bottom, #EBEBED 0%, #EAEAEE 50%, #F3F3F7 100%);                    
    }    
    .header .header-main-nav ul .mobile-submenu li { float: none; display: block; border: none; padding: 0; height: auto; line-height: 50px; font-size: 1em; }
    .header .header-main-nav ul .mobile-submenu li.clear { display: none; visibility: hidden; }
    .header .header-main-nav ul .mobile-submenu li a{ display: block;  }
    .header .header-main-nav ul .mobile-submenu li a:hover { color: red; text-decoration: none; }
    
    
    /* Make bid form
    ----------------------------------------------------------*/  
    .page{ width:100%; margin: 0 auto; }
        
    /* Make bid form
    ----------------------------------------------------------*/  
    .form-makebid{ width:100%; margin: 0 auto; }    
}



@media screen and (min-width: 320) and (max-width: 420px)
{
   .header-top-nav-title { display: none; }
}

@media screen and (min-width: 0) and (max-width: 319px)
{
   body { background: red; }
}
